<template>
  <div>
    <div>
      <!-- 有业务需求的跳转，声明式导航就无能为力，此时就需要通过js完成跳转任务--编程式导航 -->
      <button @click="goto">导航到关于页面 - 3秒后</button>
    </div>
    <hr />
    <!-- 定义路由匹配成功后要渲染到的节点 -->
    <router-view />
  </div>
</template>

<script>
export default {
  methods: {
    goto() {
      // vue-router中提供一个对象 this.$router 完成路由跳转的任务
      // push/replace/go/back
      // replace不能回退的 push能回退的  go/back 回退用的
      // push为例  string|object
      /* setTimeout(() => {
        this.$router.replace('/about')
      }, 3000); */
      // 对象方式
      this.$router.push({
        path: '/about'
      })
    }
  }
}
</script>

<style lang="scss" scoped></style>
